<!-- 开通聚合支付 -->
<template>
  <div class="warp">
    <a-steps :current="current" labelPlacement="vertical">
      <a-step title="填写入网资料" />
      <a-step title="资料提交审核中" />
      <a-step title="在线签署协议" />
      <a-step title="微信实名认证" />
    </a-steps>

    <template v-if="current === 0 && id">
      <Step1 :id="id" :disabled="disabled" @setCurrent="(val) => (current = val)" />
    </template>
    <template v-if="current === 1">
      <Step2 :id="id" :infoData="infoData" @setCurrent="setCurrent" />
    </template>
    <template v-if="current === 2">
      <Step3 :id="id" :infoData="infoData" @setCurrent="setCurrent" />
    </template>
    <template v-if="current === 3">
      <Step4 @setCurrent="setCurrent" />
    </template>
  </div>
</template>

<script>
import Step1 from './components/step1.vue'
import Step2 from './components/step2.vue'
import Step3 from './components/step2.vue'
import Step4 from './components/step4.vue'
import { SelectMerchantStatus } from '@/api/finance/finance'
import Vue from 'vue';
import { TENANTID } from '@/store/mutation-types';

export default {
  components: {
    Step1,
    Step2,
    Step3,
    Step4,
  },
  data() {
    return {
      current: 0,
      id: undefined,
      tenantId: undefined,
      infoData: {},
      disabled: false,
    }
  },
  computed: {},
  watch: {},
  methods: {
    async getSelectMerchantStatus() {
      let res = await SelectMerchantStatus({ tenantId: this.tenantId });
      if(!this.id){ this.id = res.data.id };
      this.infoData = res.data || {}
      let { applicationStatus } = this.infoData
      //资料审核中、审核已驳回、真实性验证中
      if (
        applicationStatus === 'REVIEWING' ||
        applicationStatus === 'REVIEW_BACK' ||
        applicationStatus === 'AUTHENTICITY_VERIFYING'
      ) {
        this.current = 1
      } else if (applicationStatus === 'AGREEMENT_SIGNING') {
        this.current = 2
      } else if (applicationStatus === 'COMPLETED') {
        this.current = 3
      }
    },
    setCurrent(currentIndex, disabled) {
      this.current = currentIndex
      this.disabled = disabled
    },
  },
  created() {
    this.id = this.$route.query.id;
    this.tenantId = this.$route.query.tenantId || Vue.ls.get(TENANTID);
    this.getSelectMerchantStatus()
  },
  mounted() {},
}
</script>
<style lang="less" scoped>
.warp {
  padding: 20px;
  background: #fff;
  border-radius: 20px;
}
</style>
